<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>产品列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            -webkit-tap-highlight-color: transparent;
        }
        
        .container {
            max-width: 640px;
            margin: 0 auto;
            background-color: #fff;
            min-height: 100vh;
            position: relative;
        }
        
        .header {
            position: sticky;
            top: 0;
            background-color: #1890ff;
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            z-index: 100;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .list-container {
            padding: 10px;
        }
        
        .list-item {
            background-color: #fff;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: transform 0.2s;
        }
        
        .list-item:active {
            transform: scale(0.98);
        }
        
        .item-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .item-icon {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            margin-right: 12px;
            background-color: #f0f0f0;
        }
        
        .item-info h3 {
            font-size: 16px;
            margin-bottom: 4px;
        }
        
        .item-info .product-type {
            font-size: 12px;
            color: #666;
        }
        
        .item-description {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 8px;
        }
        
        .item-footer {
            font-size: 12px;
            color: #999;
        }
        
        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            margin-top: 5px;
        }
        
        .status-badge.active {
            background-color: #e6f7ff;
            color: #1890ff;
        }
        
        .status-badge.inactive {
            background-color: #f5f5f5;
            color: #666;
        }
        
        .loading {
            text-align: center;
            padding: 20px;
            color: #999;
            font-size: 14px;
        }
        
        .refresh-tip {
            position: absolute;
            top: -40px;
            width: 100%;
            text-align: center;
            font-size: 14px;
            color: #999;
            height: 40px;
            line-height: 40px;
        }
        
        .pull-down-container {
            position: relative;
            overflow: hidden;
            min-height: 100vh;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="pull-down-container" id="pullDownContainer">
            <div class="refresh-tip" id="refreshTip">下拉刷新</div>
            <div class="header">产品列表</div>
            <div class="list-container" id="listContainer">
                <div class="loading">加载中...</div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let pageNum = 1;
        const pageSize = 10;
        let hasMore = true;
        let isLoading = false;
        
        // DOM元素
        const listContainer = document.getElementById('listContainer');
        const pullDownContainer = document.getElementById('pullDownContainer');
        const refreshTip = document.getElementById('refreshTip');
        
        // 初始加载数据
        window.addEventListener('DOMContentLoaded', () => {
            loadData();
            initPullDownRefresh();
            initPullUpLoadMore();
        });
        
        // 加载数据函数
        function loadData() {
            if (isLoading) return;
            
            isLoading = true;
            
            // 显示加载提示
            if (pageNum === 1) {
                listContainer.innerHTML = '<div class="loading">加载中...</div>';
            } else {
                const loadingDiv = document.createElement('div');
                loadingDiv.className = 'loading';
                loadingDiv.textContent = '加载更多...';
                loadingDiv.id = 'loadingMore';
                listContainer.appendChild(loadingDiv);
            }
            
            const apiUrl = `http://localhost/dev-api/system/table/list?pageNum=${pageNum}&pageSize=${pageSize}`;
            
            fetch(apiUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    isLoading = false;
                    
                    // 移除加载提示
                    const loadingMore = document.getElementById('loadingMore');
                    if (loadingMore) {
                        loadingMore.remove();
                    }
                    
                    // 处理数据
                    if (data && data.code === 200 && data.rows) {
                        renderList(data.rows);
                        
                        // 判断是否还有更多数据
                        hasMore = data.rows.length === pageSize;
                        if (!hasMore && pageNum > 1) {
                            const noMoreDiv = document.createElement('div');
                            noMoreDiv.className = 'loading';
                            noMoreDiv.textContent = '没有更多数据了';
                            listContainer.appendChild(noMoreDiv);
                        }
                    } else {
                        listContainer.innerHTML = '<div class="loading">加载失败，请重试</div>';
                    }
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                    isLoading = false;
                    
                    const loadingMore = document.getElementById('loadingMore');
                    if (loadingMore) {
                        loadingMore.remove();
                    }
                    
                    if (pageNum === 1) {
                        listContainer.innerHTML = '<div class="loading">网络错误，请重试</div>';
                    }
                });
        }
        
        // 渲染列表函数
        function renderList(data) {
            if (!data || data.length === 0) {
                listContainer.innerHTML = '<div class="loading">暂无数据</div>';
                return;
            }
            
            const imageBaseUrl = 'http://localhost/dev-api/';
            
            if (pageNum === 1) {
                listContainer.innerHTML = '';
            }
            
            data.forEach(item => {
                const listItem = document.createElement('div');
                listItem.className = 'list-item';
                
                // 为icon添加前缀
                const iconUrl = item.icon ? imageBaseUrl + item.icon : '';
                
                listItem.innerHTML = `
                    <div class="item-header">
                        <img class="item-icon" src="${iconUrl}" alt="${item.studentName || item.productId}" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 24 24%22 fill=%22%23f0f0f0%22%3E%3Cpath d=%22M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z'/%3E%3C/svg%3E'">
                        <div class="item-info">
                            <h3>${item.studentName || '未知产品'}</h3>
                            <div class="product-type">类型：${item.productType || '未知'}</div>
                        </div>
                    </div>
                    <div class="item-description">${item.description || '暂无描述'}</div>
                    <div class="item-footer">
                        ${item.remark ? '备注：' + item.remark : ''}
                    </div>
                    <div class="status-badge ${item.status === 0 ? 'inactive' : 'active'}">
                        ${item.status === 0 ? '禁用' : '启用'}
                    </div>
                `;
                
                listContainer.appendChild(listItem);
            });
        }
        
        // 下拉刷新初始化
        function initPullDownRefresh() {
            let startY = 0;
            let currentY = 0;
            let distance = 0;
            let isPulling = false;
            const threshold = 80;
            
            pullDownContainer.addEventListener('touchstart', function(e) {
                // 只有当页面滚动到顶部时才能下拉刷新
                if (window.scrollY === 0) {
                    startY = e.touches[0].clientY;
                    isPulling = true;
                }
            });
            
            pullDownContainer.addEventListener('touchmove', function(e) {
                if (!isPulling || window.scrollY > 0 || isLoading) return;
                
                currentY = e.touches[0].clientY;
                distance = currentY - startY;
                
                if (distance > 0) {
                    e.preventDefault(); // 阻止默认滚动
                    
                    // 限制下拉距离
                    const pullDistance = Math.min(distance * 0.5, threshold);
                    
                    // 设置容器样式，实现下拉效果
                    pullDownContainer.style.transition = 'transform 0s';
                    pullDownContainer.style.transform = `translateY(${pullDistance}px)`;
                    
                    // 更新提示文本
                    if (pullDistance < threshold * 0.5) {
                        refreshTip.textContent = '下拉刷新';
                    } else {
                        refreshTip.textContent = '释放刷新';
                    }
                }
            });
            
            pullDownContainer.addEventListener('touchend', function() {
                if (!isPulling || distance <= 0) {
                    isPulling = false;
                    distance = 0;
                    return;
                }
                
                // 恢复容器位置
                pullDownContainer.style.transition = 'transform 0.3s ease';
                pullDownContainer.style.transform = 'translateY(0)';
                
                // 如果下拉距离超过阈值，执行刷新
                if (distance > threshold) {
                    refreshTip.textContent = '刷新中...';
                    refreshData();
                }
                
                isPulling = false;
                distance = 0;
            });
        }
        
        // 刷新数据函数
        function refreshData() {
            pageNum = 1;
            hasMore = true;
            loadData();
            
            // 延迟重置刷新提示
            setTimeout(() => {
                refreshTip.textContent = '下拉刷新';
            }, 1000);
        }
        
        // 上拉加载更多初始化
        function initPullUpLoadMore() {
            window.addEventListener('scroll', function() {
                // 如果正在加载中或没有更多数据，则不执行
                if (isLoading || !hasMore) return;
                
                // 计算滚动条位置和页面高度
                const scrollTop = window.scrollY;
                const windowHeight = window.innerHeight;
                const documentHeight = document.documentElement.scrollHeight;
                
                // 当滚动到距离底部100px时，加载更多数据
                if (scrollTop + windowHeight >= documentHeight - 100) {
                    loadMore();
                }
            });
        }
        
        // 加载更多数据函数
        function loadMore() {
            if (isLoading || !hasMore) return;
            
            pageNum++;
            loadData();
        }
    </script>
</body>
</html>